<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>桌面便签</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: linear-gradient(to right, #AD743F, #B68050, #AD743F) 0 0/30px 100% repeat;
            overflow: hidden;
        }

        #wrap {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #wrap>div {
            position: absolute;
            padding: 40px;
            width: 160px;
            height: 160px;
            background: url(bg0.png) 0/cover no-repeat;
            overflow: hidden;
            cursor: move;
        }

        #wrap>div .content {
            width: 160px;
            height: 160px;
            overflow: hidden;
            font-family: "cursive";
            outline: none;
            border: none;
            cursor: text;
        }

        #wrap .active {
            z-index: 1;
        }

        ul {
            display: none;
            position: absolute;
            width: 150px;
            background-color: #fff;
            z-index: 2;
        }

        ul li {
            height: 25px;
            line-height: 25px;
            text-indent: 15px;
            font-size: 14px;
            cursor: pointer;
        }

        ul li:hover {
            background-color: #3C9DFF;
        }

        ul li:nth-child(2) {
            display: none;
        }

        .show {
            display: block !important;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <ul id="list">
            <li>添加便签</li>
            <li>删除便签</li>
        </ul>
    </div>

    <script>
        var oWrap = document.getElementById('wrap'),
            oList = document.getElementById('list'),
            currentDiv,
            arrStorage = JSON.parse(window.localStorage.getItem('arrStorage')) || [];
        document.oncontextmenu = function (ev) {
            ev = ev || window.event;
            ev.preventDefault()
            var left = Math.min(ev.clientX, window.innerWidth - oList.offsetWidth),
                top = Math.min(ev.clientY, window.innerHeight - oList.offsetHeight);
            oList.classList.add('show');
            oList.style.left = left + 'px';
            oList.style.top = top + 'px';
            return false;
        }
        oList.children[0].onclick = function (ev) {
            ev = ev || window.event;
            addDiv(ev.clientX, ev.clientY, new Date().getTime(), '<div class="content" contenteditable="true"></div>');
        }
        oList.onclick = function () {
            this.classList.remove('show');
            this.children[1].classList.remove('show');
        }
        window.onload = function () {
            if (arrStorage.length > 0) {
                arrStorage.forEach(function (item, index, arr) {
                    addDiv(item.left, item.top, item.id, `<div class="content" contenteditable="true">${item.val}</div>`);
                })
            } else {
                addDiv(400, 50, new Date().getTime(), '<div class="content" contenteditable="true">鼠标右键添加便签</div>')
            }
        }
        function addDiv(x, y, id, val) {
            var oDiv = document.createElement('div');
            oDiv.innerHTML = val;
            var left = Math.min(x, window.innerWidth - 240),
                top = Math.min(y, window.innerHeight - 240);
            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';
            oDiv.draggable = "true";
            oDiv.id = id;
            oDiv.style.backgroundImage = `url("./bg${~~(Math.random() * 4)}.png")`;
            oDiv.ondragstart = function (ev) {
                this.moveLeft = ev.clientX - this.offsetLeft;
                this.moveTop = ev.clientY - this.offsetTop
            }
            oDiv.ondragend = function (ev) {
                var left = ev.clientX - this.moveLeft,
                    top = ev.clientY - this.moveTop;
                left = Math.min(left, window.innerWidth - 240);
                left = Math.max(left, 0);
                top = Math.min(top, window.innerHeight - 240);
                top = Math.max(top, 0);
                this.style.left = left + 'px';
                this.style.top = top + 'px';
                var index = getIndex(arrStorage, this.id);
                if (index >= 0) {
                    item = arrStorage[index];
                    item.left = this.offsetLeft;
                    item.top = this.offsetTop;
                    window.localStorage.setItem('arrStorage', JSON.stringify(arrStorage));
                }
            }
            divFocus.call(oDiv);
            oDiv.onmousedown = function (ev) {
                ev = ev || window.event;
                divFocus.call(this);
                var that = this;
                if (ev.button === 2) {
                    oList.children[1].classList.add('show');
                    oList.children[1].onclick = function () {
                        oWrap.removeChild(that);
                        var index = arrStorage.findIndex((item) => {
                            return item.id === that.id;
                        });
                        arrStorage.splice(index, 1);
                        window.localStorage.setItem('arrStorage', JSON.stringify(arrStorage));
                    }
                }
            }
            function divFocus() {
                this.classList.add('active');
                var last = document.getElementById(currentDiv);
                last && last.classList.remove('active');
                currentDiv = this.id;
            }
            oDiv.children[0].oninput = function () {
                var val = this.innerHTML,
                    pNode = this.parentNode;
                if (val) {
                    var index = arrStorage.findIndex((item) => {
                        return item.id === pNode.id;
                    });
                    if (index < 0) {
                        arrStorage.push({ id: pNode.id, left: pNode.offsetLeft, top: pNode.offsetTop, val: val });
                    } else {
                        var item = arrStorage[index];
                        item.left = pNode.offsetLeft;
                        item.top = pNode.offsetTop;
                        item.val = val;
                    }
                    window.localStorage.setItem('arrStorage', JSON.stringify(arrStorage));
                }
            }
            oWrap.appendChild(oDiv);
            oDiv.children[0].focus();
        }
    </script>
</body>

</html>